<%--
  Created by IntelliJ IDEA.
  User: 22328
  Date: 2021/2/13
  Time: 12:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>

    <title>焕耀商城－商品详情</title>
    <link rel="stylesheet" type="text/css" href="./css/reset.css">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>

    <style>
        .tab_content dl dd ul{
            margin: 0px;
            padding: 20px 0px 0px;
            list-style: none;
            overflow: hidden;
            color: #666666;
            font-family: tahoma, arial, &#39,Microsoft YaHei&#39, &#39,Hiragino Sans GB&#39, u5b8bu4f53, sans-serif;
        }
        .tab_content dl dd ul li{
            margin: 0px 0px 5px;
            padding: 0px 0px 0px 42px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 200px;
            float: left;
        }
    </style>
</head>
<body>
<jsp:include page="top.jsp"/>

<div class="search_bar clearfix">
    <a href="./main" class="logo fl"><img src="images/logo.png"></a>
    <div class="search_con fl">
        <form method="get" action="" target="_blank">
            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
            <input type="submit" class="input_btn fr" value="搜索">
        </form>
    </div>
    <div class="guest_cart fr">
        <c:if test="${sessionScope.user!=null}">
            <a href="./getCartHtml?userId=${sessionScope.user.id}" class="cart_name fl">我的购物车</a>
            <div class="goods_count fl" id="show_count">${sessionScope.user.cartBuyNums}</div>
        </c:if>
        <c:if test="${sessionScope.user==null}">
            <a href="./login" class="cart_name fl">我的购物车</a>
            <div class="goods_count fl" id="show_count"></div>
        </c:if>
    </div>
</div>

<div class="navbar_con">
    <div class="navbar clearfix">
        <div class="subnav_con fl">
            <h1>全部商品分类</h1>
            <span></span>
            <ul class="subnav">
                <li><a href="./readMoreGoods?categoryId=1&page=1&limit=12" >衣物</a></li>
                <li><a href="./readMoreGoods?categoryId=2&page=1&limit=12" >美妆</a></li>
                <li><a href="./readMoreGoods?categoryId=3&page=1&limit=12" >书籍</a></li>
                <li><a href="./readMoreGoods?categoryId=4&page=1&limit=12" >电子</a></li>
                <li><a href="./readMoreGoods?categoryId=5&page=1&limit=12" >玩具</a></li>
                <li><a href="./readMoreGoods?categoryId=6&page=1&limit=12" >食物</a></li>
            </ul>
        </div>
        <ul class="navlist fl">
            <li><a href="./main">首页</a></li>
            <li class="interval">|</li>
            <li><a href="#">手机商城</a></li>
            <li class="interval">|</li>
            <li><a href="#">抽奖</a></li>
        </ul>
    </div>
</div>

<div class="breadcrumb">
    <a href="./main">全部分类</a>
    <span>&gt;</span>
    <c:if test="${goodInfo.categoryId==1}">
        <a href="#">衣物</a>
    </c:if>
    <c:if test="${goodInfo.categoryId==2}">
        <a href="#">美妆</a>
    </c:if>
    <c:if test="${goodInfo.categoryId==3}">
        <a href="#">书籍</a>
    </c:if>
    <c:if test="${goodInfo.categoryId==4}">
        <a href="#">电子</a>
    </c:if>
    <c:if test="${goodInfo.categoryId==5}">
        <a href="#">玩具</a>
    </c:if>
    <c:if test="${goodInfo.categoryId==6}">
        <a href="#">食物</a>
    </c:if>
    <span>&gt;</span>
    <span>商品详情</span>
</div>

<div class="goods_detail_con clearfix">
    <div class="goods_detail_pic fl"><img src="${goodInfo.goodsImg}" style="width: 300px;height: 350px"></div>

    <div class="goods_detail_list fr">
        <input type="text" value="${goodInfo.id}" id="goodsId" style="display: none">
        <input type="text" value="${sessionScope.user.id}" id="userId" style="display: none">
        <h3> ${goodInfo.goodsName} </h3>
        <p>${goodInfo.goodsDesc}</p>
        <div class="prize_bar">
            <span class="show_pirze">¥<em id="danjia">${goodInfo.goodsPrice}</em></span>
            <span class="show_unit">单  位：${goodInfo.goodsPrice}元/件</span>
        </div>
        <div class="goods_num clearfix">
            <div class="num_name fl">数 量：</div>
            <div class="num_add fl">
                <input type="text" class="num_show fl" id="shuliang" value="1">
                <a href="javascript:void(0);" class="add fr" id="jiahao">+</a>
                <a href="javascript:void(0);" class="minus fr" id="jianhao">-</a>
            </div>
        </div>
        <div class="total">总价：<em id="zongjia">${goodInfo.goodsPrice}</em>元</div>
        <div class="operate_btn">
            <c:if test="${sessionScope.user==null}">
                <a href="./login" class="buy_btn" id="buy_btn">立即购买</a>
                <a href="./login" class="add_cart" id="add_cart">加入购物车</a>
            </c:if>
            <c:if test="${sessionScope.user!=null}">
                <a style="display: none" href="javascript:void(0);" class="buy_btn" id="buy_btn">立即购买</a>
                <a href="javascript:void(0)" class="add_cart" id="add_cart">加入购物车</a>
            </c:if>
        </div>
    </div>
</div>

<div class="main_wrap clearfix">
    <div class="l_wrap fl clearfix">
        <div class="new_goods">
            <h3>新品推荐</h3>
            <ul>
                <li>
                    <a href=""><img src="${goodInfo.goodsImg}"></a>
                    <h4><a href="shop_message.html"> ${goodInfo.goodsDesc} </a></h4>
                    <div class="prize">${goodInfo.goodsPrice}</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="r_wrap fr clearfix">
        <ul class="detail_tab clearfix">
            <li class="active">商品介绍</li>
            <li>评论</li>
        </ul>

        <div class="tab_content">
            <dl>
                <dt>商品详情：</dt>
                <dd>
                    <ul id="parameter-brand" class="p-parameter-list">
                        <li title="">品牌：&nbsp;<span style="color: #5e69ad;">${goodInfo.goodsName}</span></li>
                    </ul>
                    <ul class="parameter2 p-parameter-list">
                        <li>商品名称：${goodInfo.goodsName}</li>
                        <li>商品描述：${goodInfo.goodsDesc}</li>
                        <li>商品数量：${goodInfo.goodsNum}</li>
                    </ul>
                </dd>
            </dl>
        </div>

    </div>
</div>
<jsp:include page="bottom.jsp"/>
<div class="add_jump"></div>
<script type="text/javascript" src="./js/shop_message.js"></script>
<script>
$(function () {
    $("#jiahao").click(function () {
        var num = $("#shuliang");
        num.val(parseInt(num.val())+1);
    });

    $("#jianhao").click(function () {
        var num = $("#shuliang");
        if (num.val()!='1'){
            num.val(parseInt(num.val())-1);
        }
    });

    $("#add_cart").click(function () {
        var userId = $("#userId").val();
        var goodsId = $("#goodsId").val();
        var buyNum = $("#shuliang").val();
        $.ajax({
            url:"./addCart",
            type:"post",
            data:{
                userId:userId,
                goodsId:goodsId,
                buyNum:buyNum
            },
            success:function (res) {
                if (res.data === '添加成功'){
                    window.location.href = "./getCartHtml?userId=${sessionScope.user.id}"
                } else {
                    alert("添加失败");
                }
            },
            error:function () {
                alert("404.html页面");
            }
        });
    });
});
</script>
</body>
</html>


